import { NavBar } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import { useLocalStorageState, useTitle } from "ahooks";
import { RouteTitleMap } from "./const";

import "./index.less";
import { useEffect } from "react";

export default function Header(props) {
  const navigate = useNavigate();
  const location = useLocation();
  const back = () => navigate(-1);
  const hasBack = props.hasBack !== undefined ? props.hasBack : true;
  let currentTitle = props.title || RouteTitleMap[location.pathname];
  useTitle(currentTitle);
  const [_, setDeductCount] = useLocalStorageState("DEDUCT_COUNT");

  useEffect(() => {
    if (!["/paycode", "/deduct"].includes(location.pathname)) {
      setDeductCount(0);
    }
  }, [location.pathname]);

  return null;

  return (
    <NavBar
      className={hasBack ? "header" : "header no-back"}
      onBack={hasBack ? back : () => {}}
    >
      {currentTitle}
    </NavBar>
  );
}
